<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 发起的任务类型定义
interface InitiatedTask {
  id: string;
  title: string;
  type: string;
  time: string;
  status: 'pending' | 'approved' | 'rejected' | 'processing';
  approver: string;
}

// 模拟发起的审批数据
const INITIATED_TASKS_DATA: InitiatedTask[] = [
  {
    id: '101',
    title: '请假申请',
    type: '人事',
    time: '2024-01-15 14:30',
    status: 'pending',
    approver: '张明'
  },
  {
    id: '102',
    title: '项目预算申请',
    type: '财务',
    time: '2024-01-14 10:15',
    status: 'approved',
    approver: '李总监'
  },
  {
    id: '103',
    title: '设备采购申请',
    type: '行政',
    time: '2024-01-13 16:45',
    status: 'rejected',
    approver: '王经理'
  },
  {
    id: '104',
    title: '加班申请',
    type: '人事',
    time: '2024-01-12 19:30',
    status: 'processing',
    approver: '张总'
  },
  {
    id: '105',
    title: '出差申请',
    type: '行政',
    time: '2024-01-11 11:20',
    status: 'approved',
    approver: '李总监'
  }
];

// 状态管理
const searchText = ref('');
const isRefreshing = ref(false);
const activeTab = ref<'all' | 'pending' | 'completed'>('all');
const initiatedTasks = ref<InitiatedTask[]>([...INITIATED_TASKS_DATA]);

// 计算过滤后的任务列表
const filteredTasks = computed(() => {
  // 先按搜索文本过滤
  let filtered = initiatedTasks.value;
  
  if (searchText.value) {
    filtered = filtered.filter(task => 
      task.title.toLowerCase().includes(searchText.value.toLowerCase()) ||
      task.approver.toLowerCase().includes(searchText.value.toLowerCase()) ||
      task.type.toLowerCase().includes(searchText.value.toLowerCase())
    );
  }
  
  // 再按当前选中的标签过滤
  if (activeTab.value === 'pending') {
    filtered = filtered.filter(task => task.status === 'pending' || task.status === 'processing');
  } else if (activeTab.value === 'completed') {
    filtered = filtered.filter(task => task.status === 'approved' || task.status === 'rejected');
  }
  
  return filtered;
});

// 处理搜索文本变化
const handleSearchChange = (text: string) => {
  searchText.value = text;
};

// 切换标签
const handleTabChange = (tab: 'all' | 'pending' | 'completed') => {
  activeTab.value = tab;
};

// 处理任务点击
const handleTaskPress = (taskId: string) => {
  router.push(`/approval-detail?id=${taskId}&type=initiated`);
};

// 下拉刷新
const handleRefresh = async () => {
  isRefreshing.value = true;
  try {
    // 模拟刷新数据
    await new Promise(resolve => setTimeout(resolve, 1000));
    // 实际应用中这里会重新获取数据
    initiatedTasks.value = [...INITIATED_TASKS_DATA];
  } finally {
    isRefreshing.value = false;
  }
};

// 新建审批
const handleCreateApproval = () => {
  router.push('/create-approval');
};

// 根据任务状态获取对应的样式类名
const getStatusClassName = (status: string) => {
  switch (status) {
    case 'pending':
      return 'status-pending';
    case 'approved':
      return 'status-approved';
    case 'rejected':
      return 'status-rejected';
    case 'processing':
      return 'status-processing';
    default:
      return '';
  }
};

// 根据任务状态获取对应的文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'pending':
      return '待审批';
    case 'approved':
      return '已通过';
    case 'rejected':
      return '已驳回';
    case 'processing':
      return '审批中';
    default:
      return '未知状态';
  }
};
</script>

<template>
  <div class="my-initiated-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <h1 class="page-title">我发起的</h1>
      <button class="create-button" @click="handleCreateApproval">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
      </button>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-input-container">
        <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input
          type="text"
          class="search-input"
          placeholder="搜索标题、审批人或类型"
          v-model="searchText"
          @input="handleSearchChange($event.target.value)"
        />
        <button v-if="searchText" class="clear-search-button" @click="searchText = ''">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 标签切换 -->
    <div class="tabs">
      <button
        class="tab"
        :class="{ active: activeTab === 'all' }"
        @click="handleTabChange('all')"
      >
        全部
      </button>
      <button
        class="tab"
        :class="{ active: activeTab === 'pending' }"
        @click="handleTabChange('pending')"
      >
        待处理
      </button>
      <button
        class="tab"
        :class="{ active: activeTab === 'completed' }"
        @click="handleTabChange('completed')"
      >
        已完成
      </button>
    </div>

    <!-- 任务列表 -->
    <div class="tasks-container">
      <div v-if="filteredTasks.length === 0" class="empty-state">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
          <path d="M8 14h.01"></path>
          <path d="M12 14h.01"></path>
          <path d="M16 14h.01"></path>
          <path d="M8 18h.01"></path>
          <path d="M12 18h.01"></path>
          <path d="M16 18h.01"></path>
        </svg>
        <p class="empty-state-text">
          {{ activeTab === 'all' ? '暂无发起的审批' : 
             activeTab === 'pending' ? '暂无待处理的审批' : '暂无已完成的审批' }}
        </p>
      </div>
      
      <div v-else class="tasks-list">
        <button
          v-for="task in filteredTasks"
          :key="task.id"
          class="task-item"
          @click="handleTaskPress(task.id)"
        >
          <div class="task-content">
            <div class="task-header">
              <h3 class="task-title">{{ task.title }}</h3>
              <span class="task-type">{{ task.type }}</span>
            </div>
            <div class="task-meta">
              <div class="task-info">
                <span class="task-approver">审批人：{{ task.approver }}</span>
                <span class="task-time">{{ task.time }}</span>
              </div>
              <div class="task-status">
                <span :class="['status-badge', getStatusClassName(task.status)]">
                  {{ getStatusText(task.status) }}
                </span>
              </div>
            </div>
          </div>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-initiated-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin: 0;
}

.create-button {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索栏 */
.search-bar {
  padding: 12px 16px;
  background-color: white;
  border-bottom: 1px solid #E5E7EB;
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #6B7280;
  z-index: 1;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 16px 0 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  color: #1F2937;
}

.search-input:focus {
  outline: none;
  border-color: #969FFF;
}

.clear-search-button {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 4px;
}

/* 标签切换 */
.tabs {
  display: flex;
  background-color: white;
  padding: 0 16px;
  border-bottom: 1px solid #E5E7EB;
}

.tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  color: #6B7280;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.tab.active {
  color: #969FFF;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: #969FFF;
  border-radius: 1.5px;
}

/* 任务容器 */
.tasks-container {
  min-height: calc(100vh - 220px);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6B7280;
}

.empty-state-text {
  margin-top: 16px;
  font-size: 16px;
}

/* 任务列表 */
.tasks-list {
  display: flex;
  flex-direction: column;
}

/* 任务项 */
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: white;
  border-bottom: 1px solid #E5E7EB;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  text-align: left;
}

.task-item:hover {
  background-color: #F9FAFB;
}

.task-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  color: #1F2937;
  margin: 0;
  flex: 1;
}

.task-type {
  font-size: 12px;
  color: #969FFF;
  background-color: #EEF2FF;
  padding: 2px 8px;
  border-radius: 4px;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-approver {
  font-size: 14px;
  color: #6B7280;
}

.task-time {
  font-size: 13px;
  color: #9CA3AF;
}

.task-status {
  display: flex;
  align-items: center;
}

.status-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.status-pending {
  background-color: #FEF3C7;
  color: #D97706;
}

.status-approved {
  background-color: #D1FAE5;
  color: #059669;
}

.status-rejected {
  background-color: #FEE2E2;
  color: #DC2626;
}

.status-processing {
  background-color: #DBEAFE;
  color: #2563EB;
}
</style>